@import '../../ui/base'
@import './config'

.textarea
	width 100%
	height 77px
	border 1px solid $border-color
	resize none
	padding 10px
	&[disabled]
		color #bbb

.root
	width 100%
	position relative
	&.error
		.msg
			display block
	&.filled
		.label
			font-size $label-small-size
			top -20px
			color $font-blue
	.label
		bottom 0
		color rgba(0,0,0,.26)
		color $font-color
		font-size $label-size
		left 0
		right 0
		pointer-events none
		position absolute
		display block
		top -4px
		width 100%
		overflow hidden
		white-space nowrap
		text-align left
		transition-property top, font-size
		transition-timing-function cubic-bezier(.4,0,.2,1)
		transition-duration .2s
	.msg
		position absolute
		bottom -22px
		font-size 12px
		left 0
		color red
		display none
	
	&.active
		&::before
			width 100%
			left 0
		.label
			top -20px
			color $font-blue
			font-size $label-small-size
			visibility visible
	&::before
		width 0
		height 1px
		position absolute
		content ''
		background-color $font-blue
		transition-property left, width
		transition-duration .2s
		bottom 0
		left 45%

.attr
	position: absolute;
	right: 0;
	margin-right: -62px;
	background: #ced8e2
	color: #fff;
	width: 39px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size 12px

.select-input
	width: .75em
	-webkit-appearance none
	border none
	outline none
.select-value-area
	overflow hidden
	position relative
	&::after
		display block
		content "clear"
		height 0
		clear both
		overflow hidden
		visibility hidden
	>li
		float left
		height 28px
.select-search
	line-height 28px
	span
		position absolute
		top 0
		left 99999px
		white-space pre
    pointer-events none
.select-item
	height 24px
	margin 0 2px 6px
	padding 0 10px
	border-radius 4px
	background #f3f3f3
	position relative
	max-width 99%	
	display flex
	font-size 13px
	align-items center
	-webkit-box-align center
	white-space nowrap
	>div
		display inline-block
	>img
		width 18px
		height 18px
		border-radius 50%
		margin-right 3px
.select-del
	display inline-block
	color #999
	font-size 18px 
	transition all .3s cubic-bezier(.645,.045,.355,1)
	cursor pointer
	vertical-align middle
	margin 0 -5px 0 4px
	&:hover
		color #333
.select-li
	transition all 300ms cubic-bezier(.645,.045,.355,1)
	transition-origin 50% 50%
.select-li-enter
	opacity 0
	transform scale(0)
.select-li-enter-active
	opacity 1
	transform scale(1)
.select-li-leave
	opacity 1
	transform scale(1)
.select-li-leave-active
	opacity 0
	transform scale(0)
.root
	[disabled]
		color #bbb
.list
	width 100%
.placeholder
	position: absolute
	top 0
	left 0
	line-height 30px
	padding-left 4px
	color #777
	
.tree-area
	width 100%
	max-height 200px
	overflow auto
	position absolute
	top 100%
	left 0
	background-color #fff
	box-shadow 0 0 5px rgba(0,0,0,.3)
.tree-ul
	>li
		padding-left 15px
.check-box
	height 30px
	line-height 30px
	padding 0 12px 0 30px
	position relative
	cursor pointer
	white-space nowrap
	&.check-active
		.check-select
			opacity 1
			transform scale(1)
	&.check-disabled
		.check-select
			background-color #aaa
	
.check-bg,.check-select
	width 14px
	height 14px
	border 1px solid #ccc
	position absolute
	top 7px
	left 12px
	border-radius 3px
.check-select
	border 0
	background-color #00a0f6
	opacity 0
	transform scale(0)
	transition .3s
